<link href="/common/custom/jquery/css/smoothness/jquery-ui-1.10.1.custom.css" rel="stylesheet">
<script src="/common/custom/jquery/js/jquery-1.9.1.js"></script>
<script src="/common/custom/jquery/js/jquery-ui-1.10.1.custom.js"></script>




<script>
$(function() {

    $( "#accordion" ).accordion();

    $( "#find_flow" ).button().bind('click', function(){
        price_gt = $("#price_slider").slider("values",0)
        price_lt = $("#price_slider").slider("values",1)
        date_gt  = $("#date_slider").slider("values",0)
        date_lt  = $("#date_slider").slider("values",1)
        keywords = $("#keywords_text").val()
        sort_type= $("#radio").val()
        window.alert(sort_type)

    });

    $( "#find_exact" ).button().bind('click', function(){
        window.alert('clicked')

    });


    $( "#radio" ).buttonset();



    $( "#tabs" ).tabs();


    $( "#price_slider" ).slider({
    
      range: true,
      min:    1,
      max:    200,
      values: [1, 200 ],
      step:   1,
      slide: function( event, ui ) {
        min = 1  
        max = 200
        ui.values[0]<= min ? z = 'меньше '+min+' тыс. р. - ' : z=ui.values[0] +" тыс. p. - ";
        ui.values[1]>= max ? z1 ='больше '+max+" тыс. р."    : z1=ui.values[1]+" тыс. р.";

        $( "#price_slider_label" ).val(z+z1)
        }
    });

    $( "#price_slider_label" ).val( 
        $( "#price_slider" ).slider( "values", 0 ) + " тыс. р. - "
      + $( "#price_slider" ).slider( "values", 1 ) + " тыс. р.");


    $( "#date_slider" ).slider({
      range: true,
      min:   1800,
      max:   1900,
      values: [1810,1850 ],
      slide: function( event, ui ) {
        min = 1800 
        max = 1900 
        ui.values[0]<= min ? z = 'раньше '+min+' г. - ' : z=ui.values[0] +" г. - ";
        ui.values[1]>= max ? z1 ='позже '+max+' г.'     : z1=ui.values[1]+" г.";
        $( "#date_slider_label" ).val(z +z1)}
    });

    $( "#date_slider_label" ).val($( "#date_slider" ).slider( "values", 0 ) +
      " - " + $( "#date_slider" ).slider( "values", 1 ) );


});
</script>

<style>
body{
    font: 62.5% "Trebuchet MS", sans-serif;
    margin: 50px;}
</style>

</head>
<body>



    <!-- Tabs -->
    <h2 class="demoHeaders">Tabs</h2>
    <div id="tabs">
        <ul>
            <li><a href="#search_flow">Подобрать по параметрам</a></li>
            <li><a href="#search_exact">Подобрать по точному значению</a></li>
           
        </ul>
        <div id="search_exact">
            <button id="find_exact">Искать</button>


        
        </div>
        <div id="search_flow">

           <form method='GET' action='/main/search'>
            {{field.label}}
            <font color="red">{{  field.errors|striptags }}</font>
            {{field}}


            <input type="text" id="price_slider_label" style="border: 0; color: #f6931f; font-weight: bold;background:white;width:1000px" disabled/>
            <div id="price_slider"></div>


            <label for="date_slider_label">Год издания:</label>
            <input type="text" id="date_slider_label" style="border: 0; color: #f6931f; font-weight: bold;background:white;width:1000px" disabled/>
            <div id="date_slider"></div>

            <span id="radio">
              <input type="radio" id="radio1" name="radio" value='-price'/><label for="radio1">All</label>
              <input type="radio" id="radio2" name="radio" /><label for="radio2">All</label>
              <input type="radio" id="radio3" name="radio" /><label for="radio3">All</label>
              <input type="radio" id="radio4" name="radio" /><label for="radio4">All</label>
            </span>

            <button id="find_flow">Искать</button>
           </form>
        </div>

    </div>


        </body>
        </html>
